<template>
  <div class="m-page">
    <van-nav-bar
      class="m-page__bar"
      title="购买记录"
      left-arrow
      @click-left="onClickLeft"
      right-text="添加购买记录"
      @click-right="addRecord"
    />
    <van-cell-group>
      <van-cell title="购买者" :value="`${name}（${type}）`" />
    </van-cell-group>
    <van-cell-group class="g-mt--10">
      <van-cell
        v-for="(item, index) of groupMemberOrderList"
        :key="index"
        :title="`购买数量：${item.count}套`"
        value-class="g-c--red"
        :value="`实收：${item.amount}元`"
        :label="item.created_time"
      />
    </van-cell-group>
    <!-- 弹窗 start -->
    <van-dialog
      :before-close="beforeClose"
      v-model="show"
      confirm-button-text="确认"
      show-cancel-button
    >
      <h2 class="m-dialog-title">添加购买记录</h2>
      <van-cell-group>
        <van-field
          v-model="count"
          type="number"
          placeholder="请输入购买数量（套）"
        />
        <van-field
          v-model="amount"
          type="number"
          placeholder="请输入实际收款金额（元）"
        />
      </van-cell-group>
    </van-dialog>
    <!-- 弹窗 end -->
  </div>
</template>

<script>
import { NavBar, Cell, CellGroup, Field } from "vant";
import { teamModel } from "@/api";
import Tool from "@/lib/tool";
import Util from "@/lib/util";
const tool = new Tool();
const util = new Util();
export default {
  name: "purchase_record",
  components: {
    "van-nav-bar": NavBar,
    "van-cell": Cell,
    "van-cell-group": CellGroup,
    "van-field": Field
  },
  data() {
    return {
      show: false,
      number: "",
      money: "",
      group_member_id: "",
      name: "",
      type: "",
      active: "",
      count: null,
      amount: null,
      groupMemberOrderList: []
    };
  },
  created() {
    this.group_member_id = this.$route.params.group_member_id;
    this.name = this.$route.params.name;
    this.type = this.$route.params.type;
    this.active = this.$route.params.active;
    this.getGroupMemberOrderList();
  },
  methods: {
    /* 获取团队成员购买记录列表 */
    getGroupMemberOrderList() {
      teamModel
        ._getGroupMemberOrderList({
          group_member_id: this.group_member_id
        })
        .then(res => {
          this.groupMemberOrderList = res.groupMemberOrderList.map(item => {
            item.created_time = tool.formatTime(item.created_time);
            return item;
          });
        });
    },
    onClickLeft() {
      this.$router.replace({
        name: "my_team",
        params: {
          active: this.active
        }
      });
    },
    /* 添加购买记录 */
    addRecord() {
      this.show = true;
    },
    beforeClose(action, done) {
      const formData = {
        count: this.count,
        amount: this.amount,
        group_member_id: this.group_member_id
      };
      if (action === "confirm") {
        console.log(formData, tool.formDataCheck(formData));
        if (!tool.formDataCheck(formData)) {
          this.$toast.fail({ message: "必填项为空", duration: 1500 });
          done(false);
          return;
        }
        if (!tool.checkStr(this.count, "integer") || this.count == 0) {
          this.$toast.fail({ message: "数字格式错误", duration: 1500 });
          done(false);
          return;
        }
        if (!tool.checkStr(this.amount, "money") || this.amount == 0) {
          this.$toast.fail({ message: "金额格式错误", duration: 1500 });
          done(false);
          return;
        }
        teamModel
          ._addGroupMemberOrder(formData)
          .then(res => {
            return util._done({ res });
          })
          .then(() => {
            setTimeout(() => {
              this.getGroupMemberOrderList();
            }, 1500);
          });
      }
      this.count = "";
      this.amount = "";
      done();
    }
  }
};
</script>

<style scoped></style>
